﻿<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation: myfirst 5s linear infinite alternate;
        }

        @keyframes myfirst {
            0% {
                background-color: red;
                left: 0px;
                top: 0px;
            }

            25% {
                background-color: yellow;
                left: 200px;
                top: 0px;
            }

            50% {
                background-color: blue;
                left: 200px;
                top: 200px;
            }

            75% {
                background-color: green;
                left: 0px;
                top: 200px;
            }

            100% {
                background-color: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>

    <p>test P</p>
    <button>test Button</button><br>
    <input />test Input<br>

    <div></div>

</body>
</html>